<template>
	<div style="width: 100%;height:200px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)" :id="componentModel.id">
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import utils from '@/utils/utils.js';
	export default {
		name: "PieChartComponent",
		props: ["componentModel"],
		data() {
			return {
				myChart: null
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			this.myChart = echarts.init(document.getElementById(this.componentModel.id));
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				var data = prop["data"];
				if (data != undefined) {
					let option = {
						tooltip: {
							trigger: 'item',
						},
						legend: {
							orient: 'vertical',
							left: 'left'
						},
						title: {
							text: this.componentModel.title,
							left: "center",
							subtext: this.componentModel.subtitle,
							textStyle:{
								color:this.componentModel.bigScreen?"white":"black"
							},subtextStyle:{
								color:this.componentModel.bigScreen?"white":"black"
							}
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
					};
					var series = [{
						type: 'pie',
						radius: '50%',
						data:data.list
					}];
					option["series"] = series;
					this.myChart.setOption(option,true);
				}
			}
		},
	}
</script>

<style>
</style>
